<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>部門管理</title>
    <!--[if lt IE 9]>
    <script src="http://www.json.org/json2.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../static/js/head.js"></script>
</head>
<body>
<section>
    <div>
        <blockquote>
            <div>
                <button ADP_BTN ADP_ICON="add" method="addDept">增加</button>
                <button ADP_BTN ADP_ICON="update" method="updateDept">更新</button>
                <button ADP_BTN ADP_ICON="delete" method="deleteDept">删除</button>
            </div>
        </blockquote>

        <div class="adp-content" style="min-height: 600px;">
            <div>请先选择上级部门再进行操作：</div>
            <div style="background: #f74e76;">
                <div style="float: left;width: 30%;min-height: 550px;background-color: #f4f4f4;">
                    <!--<div id="deptTree"></div>-->
                    <ul id="deptTree"></ul>
                </div>

                <div style="float:right;width: 68%;margin-left: 10px;background-color: white;">
                    <div>当前选择部门:<span id="showSelectDept"></span></div>
                    <table id="queryTable"></table>
                </div>
            </div>
        </div>

    </div>
</section>

<div style="width: 400px;display: none;" id="mergeFormDiv">
    <br/>
    <form action="" method="post" id="mergeForm"></form>
</div>


</body>
</html>

<script type="text/javascript" src="../static/js/adp2.js"></script>
<script type="text/javascript">


    var mergeForm = $("#mergeForm").adpForm({
        layout: 'vertical',
        elem: [
            {type: "text", lable: "名称", name: "name", verify: "required", placeholder: "请输入部门名称"},
            {type: "hidden", name: "id", value: ""}

        ],
        button: [
            {type: "submit", lable: "保存", method: "mergeSubmit"},
            {type: "reset", lable: "重置"}
        ]

    });


    var adptable = $("#queryTable").adpTable({
        service: "Department",
        method: "list",
        columns: [
            {field: 'name', title: '名称', width: 180},
            {field: 'password', title: '密码', width: 80},
            {
                field: 'locked', title: '是否激活', width: 100, field: function (i, obj) {
                return obj.locked ? "是" : "否";
            }
            },
            {
                field: 'url', title: '拥有角色', field: function (i, obj) {
                if (obj.roles)
                    return obj.roles.map(function (item) {
                        return item.roleName;
                    }).join(",");

                return '未绑定角色';
            }
            }
        ]
    });

    $.Topic("selectNodeChange").subscribe([
        function (data) {
            $("#showSelectDept").text((data && data.name) ? data.name : "");
        }, function (data) {
            adptable.load(data || {id: "9999999"});
        }, function (data) {
            data ? $("button").slice(1).removeClass("layui-btn-disabled") : $("button").slice(1).addClass("layui-btn-disabled");
        }
    ]);


    var currentSelectDept;
    function drawDept() {
        $("#deptTree").empty();
        layui.tree({
            elem: '#deptTree',
            nodes: SV("Department")("getDepartmentTree")(),
            click: function (node) {
                currentSelectDept = node;
                $.Topic("selectNodeChange").publish(currentSelectDept);

            }
        });


    }


    function addDept() {
        mergeForm.reset();
        $("#mergeFormDiv").open("添加部门");

    }
    function updateDept() {
        mergeForm.reset();
        $("#mergeFormDiv").open("修改部门");
        mergeForm.setData(currentSelectDept);

    }
    function mergeSubmit(dept) {
        if (currentSelectDept) {
            dept.parent = {id: currentSelectDept.id};
        }

        SV("Department")("merge")(dept);
        $("#mergeFormDiv").close();
        drawDept();
        if (currentSelectDept && currentSelectDept.id == dept.id) {
            currentSelectDept = dept;
            $.Topic("selectNodeChange").publish(currentSelectDept);
        }

    }

    function deleteDept() {
        if (currentSelectDept) {
            var rtn = SV("Department")("delete")(currentSelectDept);
            if (rtn == undefined) {

                $.msg(currentSelectDept.name + "删除成功");
                drawDept();
                currentSelectDept = undefined;
                $.Topic("selectNodeChange").publish(currentSelectDept);
            }
        } else {
            $.msg("请选择要删除的部门!");
        }
    }

    drawDept();

    $.Topic("selectNodeChange").publish();
</script>